<template>
  <div>
    <v-form-designer
      ref="vfDesigner"
      :designer-config="designerConfig"
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
    >
      <span class="flowform" @click="saveFormJson"> 保存 </span>
      <!-- <el-button  @click="saveFormJson">保存</el-button> -->
      <!-- 保存按钮 -->
      <template>
        <el-button type="text" @click="saveFormJson">
          <i class="el-icon-s-promotion" />保存</el-button
        >
      </template>
    </v-form-designer>
    <!-- <el-button type="primary" @click="saveFormJson">Submit</el-button> -->

    <!--系统表单信息-->
    <el-dialog
      :title="formTitle"
      v-model="formOpen"
      width="500px"
      append-to-body
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addForm, getForm, updateForm } from "@/api/flowable/form";
import { ElMessage } from "element-plus";
import { StrUtil } from "@/utils/StrUtil";

const formJson = reactive({
  widgetList: [],
  formConfig: {
    modelName: "formData",
    refName: "vForm",
    rulesName: "rules",
    labelWidth: 80,
    labelPosition: "left",
    size: "",
    labelAlign: "label-left-align",
    cssCode: "",
    customClass: "",
    functions: "",
    layoutType: "PC",
    jsonVersion: 3,
    onFormCreated: "",
    onFormMounted: "",
    onFormDataChange: "",
    onFormValidate: "",
  },
});
const formData = reactive({});
const optionData = reactive({});

const route = useRoute();
const router = useRouter();
const vfDesigner = ref(null);
const formRef = ref(null);

const formTitle = ref("");
const formOpen = ref(false);
const rules = ref({
  formName: [{ required: true, message: "表单名称不能为空", trigger: "blur" }],
});
const form = ref({
  formId: null,
  formName: null,
  formContent: null,
  remark: null,
});
const designerConfig = ref({
  generateSFCButton: false,
  exportCodeButton: false, //是否显示导出代码按钮
  toolbarMaxWidth: 320,
  toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
  formHeader: false,
});

onMounted(() => {
  const formId = route.query.formId;
  if (StrUtil.isNotBlank(formId)) {
    getForm(formId).then((res) => {
      vfDesigner.value.setFormJson(JSON.parse(res.data.formContent));
      form.value = res.data;
      formTitle.value = "编辑表单";
    });
  } else {
    vfDesigner.value.setFormJson({
      widgetList: [],
      formConfig: {
        modelName: "formData",
        refName: "vForm",
        rulesName: "rules",
        labelWidth: 80,
        labelPosition: "left",
        size: "",
        labelAlign: "label-left-align",
        cssCode: "",
        customClass: "",
        functions: "",
        layoutType: "PC",
        onFormCreated: "",
        onFormMounted: "",
        onFormDataChange: "",
        onFormValidate: "",
      },
    });
    formTitle.value = "新增表单";
  }
});

const saveFormJson = () => {
  const formJson = vfDesigner.value.getFormJson();
  form.value.formContent = JSON.stringify(formJson);
  formOpen.value = true;
  // submitForm
};

// const submitForm = () => {
//     vFormRef.value.getFormData().then(formData => {
//       // Form Validation OK
//       alert( JSON.stringify(formData) )
//     }).catch(error => {
//       // Form Validation failed
//       ElMessage.error(error)
//     })
//   }

const submitForm = () => {
  // formRef.value.validate((valid) => {
  //   if (valid) {

  if (form.value.formId != null) {
    updateForm(form.value).then((response) => {
      ElMessage.success("修改成功");
      formOpen.value = false;
    });
  } else {
    addForm(form.value).then((response) => {
      ElMessage.success("新增成功");
      formOpen.value = false;
      debugger;
    });
  }
  router.push({ path: "/flowable/form", query: { t: Date.now() } });
  //   }
  // });
};

const cancel = () => {
  formOpen.value = false;
  form.value = {
    formId: null,
    formName: null,
    formContent: null,
    remark: null,
  };
};
</script>

<style lang="scss" scoped>
body {
  margin: 0px; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}

div.external-link{
  display: none !important;

}
.el-container.main-container {
  background: #fff !important;
  margin-left: 0 !important;
}

:v-deep(.el-header) {
  height: 100px !important;
  // background: #000;
}
:v-deep(.main-header) {
  height: 100px !important;
  display: none;
}
:v-deep(.float-left) {
  display: none !important;
}
:v-deep(.float-right) {
  display: none !important;
}
.flowform {
  color: #409eff;
  height: auto;
  padding: 2px;
  // font-weight: 800;
  font-size: 14px;
}

.right-toolbar {
}
:v-deep(.right-toolbar-con) {
  text-align: left !important;
  width: 100% !important;
  font-weight: 600 !important;
}
</style>
